<template>
  <header>
    <div class="navbar">
      <a href="reading-home.html" class="logo">English Reader</a>
    </div>
  </header>

  <div class="container">
    <div class="category-header">
      <div class="category-info">
        <div class="category-icon" style="background-color: #4a6fa5">
          <i class="fas fa-users"></i>
        </div>
        <h1 class="category-title">科学类文章</h1>
      </div>
    </div>

    <div class="articles-list">
      <!-- 文章 1 -->
      <div class="article-card" onclick="viewArticle(1)">
        <div class="article-thumbnail">
          <span class="article-badge">科学</span>
          <div>GLOBAL COMMUNITIES</div>
        </div>
        <div class="article-content">
          <h3 class="article-title">
            Global Communities: Challenges and Opportunities in Modern Societies
          </h3>
          <div class="article-meta">
            <span><i class="far fa-eye mr-2"></i>2,148 阅读</span>
            <span><i class="far fa-clock mr-2"></i>9 min 阅读时间</span>
          </div>
          <p class="article-excerpt">
            Explore how globalization is reshaping communities, creating new
            social dynamics while presenting unique challenges...
          </p>
          <!-- <div class="reading-difficulty difficulty-2">中级</div> -->
        </div>
      </div>

      <!-- 文章 2 -->
      <div class="article-card" onclick="viewArticle(2)">
        <div class="article-thumbnail">
          <span class="article-badge">科学</span>
          <div>URBANIZATION TRENDS</div>
        </div>
        <div class="article-content">
          <h3 class="article-title">
            Urbanization Trends: The Future of City Life and Social
            Infrastructure
          </h3>
          <div class="article-meta">
            <span><i class="far fa-eye mr-2"></i>1,865 阅读</span>
            <span><i class="far fa-clock mr-2"></i>11 min 阅读时间</span>
          </div>
          <p class="article-excerpt">
            As the world's population increasingly moves to cities, what does
            this mean for social structures, community building, and urban
            development?
          </p>
          <!-- <div class="reading-difficulty difficulty-3">高级</div> -->
        </div>
      </div>

      <!-- 文章 3 -->
      <div class="article-card" onclick="viewArticle(3)">
        <div class="article-thumbnail">
          <span class="article-badge">科学</span>
          <div>SOCIAL MEDIA IMPACT</div>
        </div>
        <div class="article-content">
          <h3 class="article-title">
            The Social Media Impact: How Technology is Changing Human
            Connections
          </h3>
          <div class="article-meta">
            <span><i class="far fa-eye mr-2"></i>2,934 阅读</span>
            <span><i class="far fa-clock mr-2"></i>8 min 阅读时间</span>
          </div>
          <p class="article-excerpt">
            Digital platforms have revolutionized communication, but at what
            cost to authentic human relationships and community bonds?
          </p>
          <!-- <div class="reading-difficulty difficulty-2">中级</div> -->
        </div>
      </div>

      <!-- 文章 4 -->
      <div class="article-card" onclick="viewArticle(4)">
        <div class="article-thumbnail">
          <span class="article-badge">科学</span>
          <div>WORK-LIFE BALANCE</div>
        </div>
        <div class="article-content">
          <h3 class="article-title">
            Redefining Work-Life Balance in a Post-Pandemic Society
          </h3>
          <div class="article-meta">
            <span><i class="far fa-eye mr-2"></i>1,742 阅读</span>
            <span><i class="far fa-clock mr-2"></i>6 min 阅读时间</span>
          </div>
          <p class="article-excerpt">
            How remote work and changing social norms are creating new paradigms
            for balancing professional and personal lives worldwide.
          </p>
          <!-- <div class="reading-difficulty difficulty-1">初级</div> -->
        </div>
      </div>

      <!-- 文章 5 -->
      <div class="article-card" onclick="viewArticle(5)">
        <div class="article-thumbnail">
          <span class="article-badge">科学</span>
          <div>EDUCATION SYSTEMS</div>
        </div>
        <div class="article-content">
          <h3 class="article-title">
            Education Systems Compared: How Different Societies Approach
            Learning
          </h3>
          <div class="article-meta">
            <span><i class="far fa-eye mr-2"></i>1,506 阅读</span>
            <span><i class="far fa-clock mr-2"></i>10 min 阅读时间</span>
          </div>
          <p class="article-excerpt">
            A cross-cultural analysis of education methodologies and their
            impact on social mobility and economic development.
          </p>
          <!-- <div class="reading-difficulty difficulty-3">高级</div> -->
        </div>
      </div>

      <!-- 文章 6 -->
      <div class="article-card" onclick="viewArticle(6)">
        <div class="article-thumbnail">
          <span class="article-badge">科学</span>
          <div>SUSTAINABLE LIVING</div>
        </div>
        <div class="article-content">
          <h3 class="article-title">
            Sustainable Living Communities: Social Models for Environmental
            Conservation
          </h3>
          <div class="article-meta">
            <span><i class="far fa-eye mr-2"></i>2,311 阅读</span>
            <span><i class="far fa-clock mr-2"></i>8 min 阅读时间</span>
          </div>
          <p class="article-excerpt">
            How innovative communities are integrating environmental awareness
            into daily living to create greener, more sustainable societies.
          </p>
          <!-- <div class="reading-difficulty difficulty-2">中级</div> -->
        </div>
      </div>
    </div>

    <!-- 分页控件 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="1000"
    ></el-pagination>
  </div>
</template>
<style src="../css/english/reading-category.css"></style>